<template>
  <view class="login-container">
    <!-- 顶部装饰 -->
    <view class="header-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
    </view>

    <!-- 登录表单 -->
    <view class="login-box">
      <view class="logo-section">
        <text class="app-name">安全用药</text>
        <text class="app-slogan">欢迎登录</text>
      </view>

      <view class="form-section">
        <!-- 账号输入 -->
        <view class="input-wrapper">
          <view class="input-icon">
            <text class="icon">👤</text>
          </view>
          <input
            class="input-field"
            v-model="username"
            placeholder="请输入账号"
            placeholder-style="color: #999;"
          />
        </view>

        <!-- 密码输入 -->
        <view class="input-wrapper">
          <view class="input-icon">
            <text class="icon">🔒</text>
          </view>
          <input
            class="input-field"
            v-model="password"
            type="password"
            placeholder="请输入密码"
            placeholder-style="color: #999;"
          />
        </view>

        <!-- 错误提示 -->
        <view v-if="errorMsg" class="error-msg">
          <text>{{ errorMsg }}</text>
        </view>

        <!-- 登录按钮 -->
        <button class="login-btn" @click="handleLogin">
          <text class="btn-text">登 录</text>
        </button>

        <!-- 提示信息 -->
        <!-- <view class="tips">
          <text class="tip-text">测试账号：admin</text>
          <text class="tip-text">测试密码：123456</text>
        </view> -->
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="footer-decoration">
      <view class="wave wave-1"></view>
      <view class="wave wave-2"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      errorMsg: "",
      // 固定的账号密码
      validUsername: "admin",
      validPassword: "123456",
    };
  },
  methods: {
    handleLogin() {
      // 清空错误提示
      this.errorMsg = "";

      // 验证输入
      if (!this.username) {
        this.errorMsg = "请输入账号";
        return;
      }

      if (!this.password) {
        this.errorMsg = "请输入密码";
        return;
      }

      // 验证账号密码
      if (
        this.username === this.validUsername &&
        this.password === this.validPassword
      ) {
        // 登录成功
        uni.showToast({
          title: "登录成功",
          icon: "success",
          duration: 1500,
        });

        // 保存登录状态
        uni.setStorageSync("isLogin", true);
        uni.setStorageSync("username", this.username);

        // 延迟跳转到首页
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/home/home",
          });
        }, 1500);
      } else {
        // 登录失败
        this.errorMsg = "账号或密码错误";
        uni.showToast({
          title: "账号或密码错误",
          icon: "none",
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style scoped>
.login-container {
  height: 100vh;
  background: linear-gradient(135deg, #4375fb 0%, #8e6bfd 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 顶部装饰 */
.header-decoration {
  position: absolute;
  top: -100rpx;
  right: -100rpx;
  z-index: 1;
}

.circle {
  border-radius: 50%;
  position: absolute;
}

.circle-1 {
  width: 400rpx;
  height: 400rpx;
  background: rgba(255, 255, 255, 0.1);
  top: 0;
  right: 0;
}

.circle-2 {
  width: 300rpx;
  height: 300rpx;
  background: rgba(255, 255, 255, 0.15);
  top: 100rpx;
  right: 100rpx;
}

/* 登录框 */
.login-box {
  position: relative;
  z-index: 10;
  padding: 60rpx 60rpx 190rpx;
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
}

/* Logo区域 */
.logo-section {
  text-align: center;
  margin-bottom: 100rpx;
}

.app-name {
  display: block;
  font-size: 56rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20rpx;
  letter-spacing: 4rpx;
}

.app-slogan {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 2rpx;
}

/* 表单区域 */
.form-section {
  background: #ffffff;
  border-radius: 30rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
}

/* 输入框容器 */
.input-wrapper {
  display: flex;
  align-items: center;
  background: #f5f7fa;
  border-radius: 50rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  height: 100rpx;
}

.input-icon {
  margin-right: 20rpx;
}

.icon {
  font-size: 40rpx;
}

.input-field {
  flex: 1;
  font-size: 30rpx;
  color: #333333;
  height: 100%;
}

/* 错误提示 */
.error-msg {
  margin-bottom: 20rpx;
  padding: 0 20rpx;
}

.error-msg text {
  color: #ff4d4f;
  font-size: 24rpx;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  height: 100rpx;
  background: linear-gradient(135deg, #4375fb 0%, #8e6bfd 100%);
  border-radius: 50rpx;
  border: none;
  margin-top: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(67, 117, 251, 0.3);
}

.login-btn::after {
  border: none;
}

.btn-text {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 4rpx;
}

/* 提示信息 */
.tips {
  margin-top: 40rpx;
  padding: 30rpx;
  background: #fff7e6;
  border-radius: 20rpx;
  border: 2rpx dashed #ffd591;
}

.tip-text {
  display: block;
  font-size: 24rpx;
  color: #fa8c16;
  text-align: center;
  line-height: 40rpx;
}

/* 底部装饰 */
.footer-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  z-index: 1;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50% 50% 0 0;
}

.wave-1 {
  opacity: 0.3;
}

.wave-2 {
  bottom: 20rpx;
  opacity: 0.2;
  height: 80rpx;
}
</style>
